<template>
  <div id="app">
    <!-- 其他页 -->
    <div class="layout" v-if="$route.meta.requireBase">
        <Layout>
            <!-- 头部文件 -->
            <Header></Header>
            <Layout>
                <!-- 侧边栏 -->
                <Sider hide-trigger :style="{background: '#fff', minHeight: sHeight}">
                  <Slider></slider>
                </Sider>
                <!-- 内容区 -->
                <Layout :style="{padding: '0 24px 24px'}">
                    <router-view/>
                    <!-- 底部 -->
                    <footer class="footer"><Foot></Foot></footer>
                </Layout>
            </Layout>
        </Layout>
    </div>
    <!-- 登陆页 -->
    <router-view v-if="!$route.meta.requireBase" />
  </div>
</template>

<script>
import Header from '@/components/base/header.vue'
import Slider from '@/components/base/slider.vue'
import Foot from '@/components/base/footer.vue'
import $ from 'jquery'
export default {
  components: {
    Header,
    Slider,
    Foot
  },
  name: 'App',
  data () {
    return {
      sHeight: ''
    }
  },
  mounted () {
    // 设置侧边栏高度
    var pmHeight = $(window).height()
    this.sHeight = pmHeight - 30 + 'px'
  }
}
</script>

<style scoped>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.footer{
    text-align: center;
    font-size:16px;
    margin-top: 15px
}
</style>
